<style scoped lang="scss">
  $width:200px;

  $height:120px;

  .mine-container{
    width: $width;
    height:$height;
    float: right;
    position: relative;
  }

  .hidden-ctn{
    .message-box{
      top: 130px !important;
      opacity: 1 !important;
    }

    .arrow-top{
      bottom:-15px !important;
      opacity: 1 !important;
    }
  }

  .left-msg{
    width:80px;
    height: 120px;
    display: block;
    text-align: center;
    float: left;
    cursor: pointer;
    position: relative;

  .no-message{
    width:100%;
    height: 80px;
    line-height: 80px;
    font-size: 20px;
    color: white;
    clear: both;
    font-family: '微软雅黑';
  }

  .clear-msg{
    float: right;
    font-size: 12px !important;
    margin-right: 10px;
  }

    .message-box{
      position: absolute;
      left:-220px;
      top:50px;
      max-height: 115px;
      width:300px;
      overflow-y: scroll;
      background:rgba(0,0,0,0.8);
      opacity:0;
      z-index: -10;
      box-shadow: 0 0 5px rgba(0,0,0,0.3);
      border-radius: 5px;

      .message-line,
      .operate{
        width:100%;
        height: 21px;
        color: white;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        display: block;
        float: left;
        text-align: left;
        padding: 2px 0;
        line-height: 21px;
        font-size: 12px;
        text-indent: 1em;
        clear: both;
      }

      .message-line:last-child{
        margin-bottom: 5px;
      }

      .operate{
        padding: 0 !important;
        font-size: 16px;
        margin: 5px 0;
      }

    }

    .arrow-top{
      position: absolute;
      bottom:65px;
      right:30px;
      height: 0;
      font-size: 0;
      line-height: 0;
      border-style: solid;
      border-width: 10px 10px 10px 0;
      border-color: transparent rgba(0,0,0,0.8);
      transform: rotate(90deg);
      opacity: 0;
      z-index: -10;
    }




  }

  .msg-icon{
    width:40px;
    height: 30px;
    background-image: url('../../assets/images/msg.png');
    background-size:cover;
    display: inline-block;
    margin:45px auto;
    position: relative;

    $size:20px;

    .msg-badge{
      width:$size;
      height:$size;
      background: red;
      line-height:$size;
      text-align: center;
      position: absolute;
      right:-$size/2;
      top:-5px;
      color: white;
      border-radius: 50%;

    }

  }

  .right-msg{
    width:120px;
    height: $height;
    display: block;
    float: left;
    position: relative;
  }

  .myself-icon{
    width:60px;
    height:60px;
    display: block;
    margin:30px auto;
    border-radius: 50%;
    cursor: pointer;
  }

  .myself-status{
    width: 30px;
    height: 30px;
    display: block;
    position: absolute;
    left:80px;
    top:80px;
    transform: translate(-50%,-50%);
    background-image: url("../../assets/images/ok.png");
    background-size: cover;
    border-radius: 50%;
  }

  .myinfo-container{
    width: 150px;
    min-height:30px;
    display: block;
    background: rgba(0,0,0,0.8);
    position: absolute;
    /*top:140px;*/
    top:130px;
    right:20px;
    opacity: 0;
    z-index: -20;
  }

  .info-item{
    width:100%;
    height: 30px;
    line-height:30px;
    display: block;
    color: white;
    font-family:'微软雅黑';
    border-bottom: 1px solid #ccc;
    text-align: center;
    cursor: pointer;
    user-select: none;

    &:hover{
      background: #0d1721;
    }

    .icon{
      display: inline-block;
      width:20px;
      height: 20px;
      vertical-align: middle;
      margin-right: 10px;
    }

    .info-icon{
      @extend .icon;
      background-image: url("../../assets/images/user.png");
      background-size:cover;
    }

    .logout-icon{
      @extend .icon;
      background-image: url("../../assets/images/logout.png");
      background-size:cover;
    }

    &:last-child{
      border-bottom:none;
    }
  }

  .corner-icon{
    position: absolute;
    top:-15px;
    right:30px;
    height: 0;
    font-size: 0;
    line-height: 0;
    border-style: solid;
    border-width: 10px 10px 10px 0;
    border-color: transparent rgba(0,0,0,0.8);
    transform: rotate(90deg);

  }

  .toggle-box{
    width:60px;
    height: 60px;
    position: absolute;
    left:110px;
    top:30px;
    margin:0px ;
    opacity: 0;
    cursor: pointer;
    padding:0px;
    &:checked~.myinfo-container{
      opacity:1;
      top:140px;
      z-index: 10;
    }
  }

  .animate-toggle{
    transition: all ease-in-out .3s;
  }

</style>
<template>
  <div class="mine-container">
    <div class="left-msg" :class="{'hidden-ctn':state}">
          <span class="msg-icon" @click="showMsg">
            <i class="msg-badge" v-if="msg.length>0">{{msg.length}}</i>
          </span>
          <div class="message-box animate-toggle" >
            <div class="operate">
              <span class="text-title">消息盒子</span>
              <span class="clear-msg" v-if="msg.length>0" @click="clearMsg">清空</span>
            </div>
            <template v-if="msg.length>0" v-for="item in msg">
              <div class="message-line" :title="item.content">
                <span class="message-type">【{{item.type}}】</span>
                {{item.content}}
              </div>
            </template>
            <div class="no-message" v-if="msg.length<=0">
              暂无新消息
            </div>
          </div>
          <span class="arrow-top animate-toggle"></span>
    </div>
    <div class="right-msg" >
      <img class="myself-icon" :src="imgUrl" ref="img" />
      <span class="myself-status"></span>
    </div>
    <input type="checkbox" ref="checkbox" class="toggle-box"  />
    <div class="myinfo-container animate-toggle">
      <span class="corner-icon"></span>
      <div class="info-item">
        <span class="info-icon"></span>
        <span>我的信息</span>
      </div>
      <div class="info-item">
        <span class="logout-icon"></span>
        <span @click="logout">退出登录</span>
      </div>
    </div>
  </div>
</template>
<script>
  export  default  {
    name:"Mine",
    data(){
      return {};
    },
    data(){
      return {
        state:false
      }
    },
    props:{
      imgUrl:{
        type:String,
        required:false,
        default:"https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif?imageView2/1/w/80/h/80"
      },
      msg:{
        type:Array,
        required:false,
        default:[]
      }
    },
    methods:{
//      toggle(){
//        this.$refs['checkbox'].checked=!this.$refs['checkbox'].checked;
//      },
      showMsg(){

       this.state=!this.state;

      },
      clearMsg(){

        this.$confirm('此操作将会清空消息,是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then((res) => {

          this.state=!this.state;

          while(this.msg.length>0){
            this.msg.splice(0,1);
          }

        },(res) =>{


        }).catch(err =>{

        });

      },
      logout(){

        this.$store.dispatch('loginOut').then((res)=>{

          this.$router.push( { path: "/login" } );

          this.$message('注销成功!');

        },(response)=>{

          this.$message('注销失败!');

        }).catch((err)=>{

          this.$message('错误，请联系管理员!');

        });
      }
    }
  }
</script>
